<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
            <el-breadcrumb-item :to="{ path: '/' }">
                <i class="el-icon-document"></i>数据统计
            </el-breadcrumb-item>
            <el-breadcrumb-item>统计</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>

        <div>
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-card shadow="hover">
                        <div>
                            <i class="el-icon-s-order"
                               style="position: relative;left: 147px;font-size: 45px"></i>
                            <p style="text-align: center">今日订单量</p>
                            <p style="text-align: center; font-size: 25px;color: red">{{value}}</p>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="hover">
                    <div>
                        <i class="el-icon-s-data"
                           style="position: relative;left: 147px;font-size: 45px"></i>
                        <p style="text-align: center">今日销售额</p>
                        <p style="text-align: center; font-size: 25px;color: red">{{value1}}</p>
                    </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="hover">
                    <div>
                        <i class="el-icon-s-marketing"
                           style="position: relative;left: 147px;font-size: 45px"></i>
                        <p style="text-align: center">今日全站流量</p>
                        <p style="text-align: center; font-size: 25px;color: red">{{value2}}</p>
                    </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="hover">
                    <div>
                        <i class="el-icon-s-order"
                           style="position: relative;left: 147px;font-size: 45px"></i>
                        <p style="text-align: center">今日下单人数</p>
                        <p style="text-align: center; font-size: 25px;color: red">{{value3}}</p>
                    </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                like: true,
                value: 465,
                value1: 8412,
                value2: 658,
                value3: 413,
            };
        },
    };
</script>
